//表格渲染
import OperaBtnRender from '@/components/OperaBtnRender';
import ProTable from '@/components/ProTable';
import CommonPage from '@/components/CommonPagination';
import SetTableColumns from './SetTableColumns.jsx';
import { Space } from 'antd';

const TableRender = (props) => {

  const { data, columns, style, pageConfig = {}, operaConfig = {}, ...reset } = props;

  const { showPage = true, pages, pageStyle, handlePageSize, ...resetPages } = pageConfig;

  const { refs = null, operaStyle = {}, showOpera, operaLeftArr, operaRightArr, showTableSet, defaultColumns, realColumns, updateColumns } = operaConfig;

  const ProTableProps = {
    data,
    columns,
    style
  }

  const defaultPages = {
    showQuickJumper: true,
  }

  const CommonPageProps = {
    pagination: { ...defaultPages, ...pages, },
    style: {
      marginTop: '16px',
      ...pageStyle
    },
    ...resetPages,
    //分页变化
    handleChange(page, size) {
      handlePageSize(page, size);
    },
  }

  //设置列
  const SetTableColumnsProps = {
    defaultColumns,
    realColumns,
    updateColumns
  }

  const operaDefaultStyle = {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'baseline',
    marginBottom: '12px'
  }

  return (
    <>
      {
        showOpera &&
        <div ref={refs} style={{ ...operaDefaultStyle, ...operaStyle }} >
          {operaLeftArr && <OperaBtnRender btnArr={operaLeftArr} />}
          <Space>
            {operaRightArr && <OperaBtnRender btnArr={operaRightArr} />}
            {showTableSet && <SetTableColumns {...SetTableColumnsProps} />}
          </Space>
        </div>
      }
      <ProTable {...{ ...ProTableProps, ...reset }} />
      {showPage && <CommonPage {...CommonPageProps} />}
    </>
  );
}

export default TableRender;